<script setup>
import {ref} from "vue";
import api from "@/api/index.js";
import {reqUsernameLogin} from "@/api/modules/login.js";
import router from "@/router/index.js";
import {useCookies} from '@vueuse/integrations/useCookies'
import {md5} from 'js-md5'
import {ElNotification} from "element-plus";
import {loginSuccessTime} from "@/utils/time.js"
import {useRoute} from "vue-router";
import {throttle} from "lodash";
import {reqGenerateCaptcha} from "@/api/modules/captcha.js";

const route = useRoute()
const $cookie = useCookies()
const formRef = ref()
const loginModel = ref({
  username: '',
  password: '',
  checkCode: '',
  checkCodeKey:'',
  isRemember: 0
})
const login = async () => {
  const success = await formRef.value.validate()
  if (success) {
    const tempInfo = $cookie.get("loginInfo")
    const reqParams = JSON.parse(JSON.stringify(loginModel.value))
    if (!tempInfo || tempInfo.password !== reqParams.password) {
      reqParams.password = md5(reqParams.password)
    }
    await reqUsernameLogin(reqParams)
    if (loginModel.value.isRemember === 1) {
      delete reqParams.checkCode
      delete reqParams.checkCodeKey
      // 一天后过期
      $cookie.set("loginInfo", reqParams, {maxAge: 24 * 60 * 60})
    }
    ElNotification({
      title: 'Success',
      message: "欢迎回来，" + loginSuccessTime() + "好~",
      type: 'success',
      duration: 2000
    })
    if (route.query.redirect) {
      await router.push(route.query.redirect)
    } else {
      await router.push("/")
    }
  }
}

const loginThrottle= throttle(login,5000,{trailing:false})

const loadCookie = () => {
  const userInfo = $cookie.get("loginInfo")
  if (userInfo) {
    loginModel.value = userInfo
  }
}
const checkCodeImage=ref()
const loadCheckCode=async ()=>{
  const res=await reqGenerateCaptcha()
  checkCodeImage.value="data:image/jpeg;base64,"+res.imageBase64
  loginModel.value.checkCodeKey=res.checkCodeKey
}
loadCheckCode()
loadCookie()
</script>

<template>
    <el-form ref="formRef" :model="loginModel">
      <div class="login-title">登录页面</div>
      <el-form-item>
        <el-input placeholder="用户名" v-model="loginModel.username">
          <template #prefix>
            <span class="iconfont icon-account"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="密码" v-model="loginModel.password" type="password" show-password>
          <template #prefix>
            <span class="iconfont icon-password"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <div class="check-code">
          <el-input class="input" placeholder="验证码" v-model="loginModel.checkCode"></el-input>
          <el-image class="pic" :src="checkCodeImage" @click="loadCheckCode"></el-image>
        </div>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="loginModel.isRemember" style="color: white" :true-value="1" :false-value="0">记住我
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" @click="loginThrottle">登录</el-button>
      </el-form-item>
    </el-form>
</template>

<style scoped lang="scss">

.login-btn {
  width: 100%;
}


.login-title {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  color: #ffffff;
}

.check-code {
  display: flex;
  width: 100%;
  justify-content: space-between;
  .input {
    width: 60%;
  }

  .pic {
    width: 35%;
    cursor: pointer;
    height: 30px;
  }
}
</style>
